import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useResponsiveContext } from '../components/ResponsiveProvider';
import ResponsiveText from '../components/ResponsiveText';
import ResponsiveView from '../components/ResponsiveView';
import { wp, hp, sp } from '../utils/layout';
import { createResponsiveStyles } from '../utils/StyleUtils';

/**
 * 健康预警页面组件，展示健康预警信息，包含今日预警、指标预警卡片和查看报告按钮。
 * 点击查看报告按钮可跳转到健康预警报告页面。
 */
export const HealthScreen = React.memo(() => {
  const navigation = useNavigation();

  // 提取 onPress 事件处理函数
  const handleReportButtonPress = () => {
    try {
      navigation.navigate('HealthReportScreen'); // 跳转到健康预警报告页面
    } catch (error) {
      console.error('导航失败:', error);
    }
  };

  return (
    <ResponsiveView style={styles.container}>
      {/* 头部导航栏 */}
      <ResponsiveView style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <ResponsiveText style={styles.headerTitle}>健康预警</ResponsiveText>
        <View style={styles.headerRight} />
      </ResponsiveView>
      
      {/* 主要内容区域 */}
      <ResponsiveView style={styles.contentContainer}>
        {/* 今日预警部分 */}
        <View style={styles.section}>
          <Text style={styles.subtitle}>今天</Text>
          
          {/* 指标预警卡片 */}
          <View style={styles.alertCard}>
            <Text style={styles.alertTitle}>指标预警</Text>
            <Text style={styles.alertText}>
              您的血压指标近期有波动，建议及时进行复查并调整用药方案。
            </Text>
          </View>
          
          {/* 分隔线 */}
          <View style={styles.divider} />
          
          {/* 查看报告按钮 */}
          <TouchableOpacity 
            style={styles.reportButton}
            onPress={handleReportButtonPress}
          >
            <Text style={styles.reportButtonText}>查看数据报告</Text>
          </TouchableOpacity>
        </View>
      </ResponsiveView>
    </ResponsiveView>
  );
});

const styles = createResponsiveStyles({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: wp(16),
    paddingVertical: hp(12),
    backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#E0E0E0',
  },
  backButton: {
    padding: wp(4),
  },
  headerTitle: {
    fontSize: sp(17),
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    flex: 1,
    marginHorizontal: wp(16),
  },
  headerRight: {
    width: wp(24),
  },
  contentContainer: {
    flex: 1,
    padding: wp(20),
  },
  section: {
    marginBottom: hp(20),
  },
  subtitle: {
    fontSize: sp(18),
    fontWeight: '600',
    marginBottom: hp(15),
    color: '#444',
  },
  alertCard: {
    backgroundColor: '#FFF8F0',
    borderRadius: 10,
    padding: wp(15),
    marginBottom: hp(15),
  },
  alertTitle: {
    fontSize: sp(16),
    fontWeight: 'bold',
    marginBottom: hp(8),
    color: '#FF6B35',
  },
  alertText: {
    fontSize: sp(14),
    lineHeight: hp(20),
    color: '#666',
  },
  divider: {
    height: 1,
    backgroundColor: '#eee',
    marginVertical: hp(15),
  },
  reportButton: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingVertical: hp(12),
    alignItems: 'center',
  },
  reportButtonText: {
    color: 'white',
    fontSize: sp(16),
    fontWeight: '500',
  },
});
